<template>
  <div>
    <div class="top">
      <div class="avatar"><img :src="info.head_sculpture" alt="" width="100%"></div>
      <div class="sub">
        <van-button plain hairline type="info" size="mini">保存</van-button>
      </div>
    </div>
    <div class="card-list">
      <div class="card info">
        <van-cell-group>
          <van-field v-model="info.name" label="教师姓名" />
          <van-field v-model="info.phone" label="手机号" />
          <van-field v-model="info.identity" label="身份证号" />
        </van-cell-group>
      </div>
      <div class="card info">
        <van-cell-group title="TA的课程">
          <div v-for="(item,index) in curriculum" :key="index">
            <van-cell :title="item.kcname" :label="'下次课时间：'+item.sktime">
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <!-- <van-icon slot="right-icon" name="records" size="20px" style="line-height: inherit;margin-right: 10px;" @click="$router.push({path:'/change_courses',query:{data:item.id}})" /> -->
              <!-- <van-icon slot="right-icon" name="records" size="20px" style="line-height: inherit;margin-right: 10px;" @click="open(item.id)" /> -->
              <van-icon slot="right-icon" name="delete" size="20px" style="line-height: inherit;" @click="kechengDelete(item.kcid)"/>
            </van-cell>
          </div>
        </van-cell-group>
      </div>
      <div>
        <van-cell-group>
          <van-cell title="月统计表">
            <div class="step-time">
              <van-icon name="arrow-left" @click="jian"/>
              <span style="margin: 0 10px;">{{ time }}</span>
              <van-icon name="arrow" @click="jia"/>
            </div>
          </van-cell>
          <van-cell title="总课时" :value="classData.count" />
          <van-cell title="已上课时" :value="classData.finish" />
          <van-cell title="调整课时" :value="classData.adjust" />
        </van-cell-group>
      </div>
        <!-- 日期选择器 -->
      <van-popup v-model="show" position="bottom">
        <van-datetime-picker v-model="currentDate" type="year-month" @confirm="confirm()" @cancel="cancel" :formatter="formatter" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { Dialog, Toast } from 'vant'
export default {
  name: 'my-editor',
  data () {
    return {
      currentDate: new Date(),
      show: false,
      showDialog: false,
      info: {},
      curriculum: [],
      time: '',
      addForm: {
        kechValue: '',
        typeValue: ''
      },
      showTime: false,
      classData: {},
      month: '',
      year: '',
      ktime: '',
      jtime: ''
    }
  },
  created () {
    this.getTime()
    this.findTeacher()
    this.findTeacherStatistics()
    // this.kechengTeacher()
  },
  methods: {
    // 查询教师信息
    findTeacher () {
      api.agencyFindTeacher({
        params: {
          teacher_id: this.$route.query.data
        },
        callback: res => {
          // 教师数据
          this.info = res.data.data.a
          console.log(res.data.data.a)
          // 教师课程数据
          this.curriculum = res.data.data.b
        }
      })
    },
    // 月统计表    agencyFindTeacherStatistics
    findTeacherStatistics () {
      api.agencyFindTeacherStatistics({
        params: {
          teacher_id: this.$route.query.data,
          ktime: this.ktime,
          jtime: this.jtime
        },
        callback: res => {
          this.classData = res.data.data
          console.log(res.data.data)
        }
      })
    },
    // 月统计表时间函数
    getTime () {
      let date = new Date()
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.time = this.year + '-' + this.month // 给time 赋值
      // 获取 月范围内时间戳
      this.ktime = new Date(this.year, this.month - 1, 1).getTime()
      this.jtime = Number(new Date(this.year, this.month, 1).getTime()) - Number(1)
      console.log(this.time, this.ktime, this.jtime)
    },
    // 点击上个月
    jian () {
      this.month = Number(this.month) - Number(1)
      if (this.month === 0) {
        this.year = Number(this.year) - Number(1)
        this.month = 12
      }
      this.time = this.year + '-' + this.month // 给time 赋值
      // 获取 月范围内时间戳
      this.ktime = new Date(this.year, this.month - 1, 1).getTime()
      this.jtime = Number(new Date(this.year, this.month, 1).getTime()) - Number(1)
      console.log(this.time, this.ktime, this.jtime)
      this.findTeacherStatistics()
    },
    // 点击下个月
    jia () {
      this.month = Number(this.month) + Number(1)
      if (this.month === 13) {
        this.year = Number(this.year) + Number(1)
        this.month = 1
      }
      this.time = this.year + '-' + this.month // 给time 赋值
      // 获取 月范围内时间戳
      this.ktime = new Date(this.year, this.month - 1, 1).getTime()
      this.jtime = Number(new Date(this.year, this.month, 1).getTime()) - Number(1)
      console.log(this.time, this.ktime, this.jtime)
      this.findTeacherStatistics()
    },
    // 选择日期 确认按钮事件
    confirm (value) {
      this.show = false
      console.log()
    },
    cancel () {
      this.show = false
    },

    // kechengTeacher  获取教师课程列表
    // kechengTeacher () {
    //   api.agencyKechengTeacher({
    //     params: {
    //       teacher_id: this.$route.query.data
    //     },
    //     callback: res => {
    //       this.curriculum = res.data.data
    //       console.log(res.data.data)
    //     }
    //   })
    // },
    // 删除课程
    kechengDelete (id) {
      let params = {
        id: id
      }
      Dialog.confirm({
        message: '是否确认删除？'
      }).then(() => {
        // on confirm
        api.agencyKechengDelete({
          params,
          callback: res => {
            console.log(res)
            if (res.data.error_code === '4005') {
              Toast.success(res.data.message)
            } else {
              Toast(res.data.message)
            }
          }
        })
        this.kechengTeacher()
      }).catch(() => {
        // on cancel
        Toast('取消删除')
      })
    },
    // 获取课程详细信息
    // 课程类型上拉框select
    // 重复方式上拉框select
    // 临时调课  kechengUpdate
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    dateCancel () {
      this.showPop = false
    }
  },
  components: {}

}
</script>

<style scoped>
  .top {
    height: 140px;
    position: relative;
  }

  .top .avatar {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 50%;
    margin-top: -30px;
    border-radius: 50%;
    overflow: hidden;
  }

  .top .sub {
    position: absolute;
    right: 15px;
    top: 15px;
  }

  .card-list {
    background-color: #F2F2F2;
    padding: 15px;
  }

  .card-list .card {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 6px;
  }
  .van-cell{
      align-items: center;
  }
  .step-time{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
